<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link href="<c:url value="/css/style.css"/>" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link rel="stylesheet" href="../../css/style.css">
</head>
<body>
<div class="container">
    <%--弹窗输入信息--%>
    <div id="employeeModal" class="modal1">
        <div class="modal1-content">
            <span class="close1">&times;</span>
            <h2>添加员工信息</h2>
            <form action="employee" method="post">
                <input type="hidden" name="action" value="add">
                <div class="form1-group1">
                    <label for="empId">员工ID:</label>
                    <input type="text" id="empId" name="empId" required>
                </div>
                <div class="form1-group1">
                    <label for="name">姓名:</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form1-group1">
                    <label for="gender">性别:</label>
                    <input type="text" id="gender" name="gender" required>
                </div>
                <div class="form1-group1">
                    <label for="nation">民族:</label>
                    <input type="text" id="nation" name="nation" required>
                </div>
                <div class="form1-group1">
                    <label for="deptId">部门ID:</label>
                    <input type="number" id="deptId" name="deptId" required>
                </div>
                <div class="form1-group1">
                    <label for="position">职位:</label>
                    <input type="text" id="position" name="position" required>
                </div>
                <div class="form1-group1">
                    <label for="email">邮箱:</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form1-group1">
                    <label for="phone">电话:</label>
                    <input type="text" id="phone" name="phone" required>
                </div>
                <div class="form1-group1">
                    <label for="address">地址:</label>
                    <input type="text" id="address" name="address" required>
                </div>
                <div class="form1-group1">
                    <label for="birthplace">出生地:</label>
                    <input type="text" id="birthplace" name="birthplace" required>
                </div>
                <div class="form1-group1">
                    <label for="birthday">出生日期:</label>
                    <input type="date" id="birthday" name="birthday" required>
                </div>
                <div class="form1-group1">
                    <label for="salary">薪资:</label>
                    <input type="number" step="0.01" id="salary" name="salary" required>
                </div>
                <div class="form1-group1">
                    <label for="education">学历:</label>
                    <input type="text" id="education" name="education" required>
                </div>
                <div class="form1-group1"><label for="graduateSchool">
                    毕业院校:</label>
                    <input type="text" id="graduateSchool" name="graduateSchool" required>
                </div>
                <div class="form1-group1">
                    <label for="contractId">合同ID:</label>
                    <input type="text" id="contractId" name="contractId" required>
                </div>
                <div class="form1-group1"><label for="status">
                    状态:</label>
                    <input type="text" id="status" name="status" required>
                </div>
                <div class="form1-group1">
                    <label for="hireDate">入职日期:</label>
                    <input type="date" id="hireDate" name="hireDate" required>
                </div>
                <div class="form1-group1">
                    <label for="regularDate">转正日期:</label>
                    <input type="date" id="regularDate" name="regularDate">
                </div>
                <div class="form1-group1">
                    <label for="leaveDate">离职日期:</label>
                    <input type="date" id="leaveDate" name="leaveDate">
                </div>
                <button type="submit" class="btn">添加员工</button>
            </form>
        </div>
    </div>
    <%--主页面--%>
    <div class="sidebar">
        <h2>员工管理系统</h2>
        <div class="user-info">
            <p>欢迎, ${user.username}</p>
            <a href="login.jsp">退出登录</a>
        </div>
        <ul class="menu">
            <li class="active"><a href="#">员工管理</a></li>
            <li><a href="#">部门管理</a> </li>
            <li><a href="#">薪资管理</a></li>
            <li><a href="attendance?action=list">考勤管理</a></li>
            <li><a href="#">修改密码</a></li>
            <li><a href="register">注册管理员</a></li>
        </ul>
    </div>
<%--展示信息--%>
    <div class="main-content">
        <h1>员工管理</h1>
        <div class="toolbar">
            <form action="employee" method="post" class="search-form">
                <input type="hidden" name="action" value="search">
                <input type="text" name="keyword" placeholder="搜索员工...">
                <button type="submit">搜索</button>
            </form>
<%--            <a href="employee_add" class="btn">添加员工</a>--%>
            <button id="addBtn" class="btn">添加员工</button>
        </div>

        <% if (request.getAttribute("error") != null) { %>
        <div class="error-message">${error}</div>
        <% } %>

        <table class="data-table">
            <thead>
            <tr>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>电话</th>
                <th>部门</th>
                <th>职务</th>
                <th>薪资</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${employee}" var="employee">
                <tr>
                    <td>${employee.empId}</td>
                    <td>${employee.name}</td>
                    <td>${employee.gender}</td>
                    <td>${employee.age}</td>
                    <td>${employee.phone}</td>
                    <td>${employee.deptName}</td>
                    <td>${employee.position}</td>
                    <td>${employee.salary}</td>
                    <td>
                        <a href="../../employee?action=view&empId=${emp.empId}" class="btn-small">查看</a>
                        <a href="employee_edit.jsp?empId=${emp.empId}" class="btn-small">编辑</a>
                        <form action="../../employee" method="post" style="display:inline;">
                            <input type="hidden" name="action" value="delete">
                            <input type="hidden" name="empId" value="${emp.empId}">
                            <button type="submit" class="btn-small btn-danger" onclick="return confirm('确定删除该员工吗？')">删除</button>
                        </form>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<script>
    // 获取DOM元素
    const addBtn = document.getElementById("addBtn");
    const modal1 = document.getElementById("employeeModal");
    const closeBtn1 = document.querySelector(".close1");

    // 点击"添加员工"按钮显示模态框
    addBtn.addEventListener("click", function() {
        modal1.style.display = "block";
    });

    // 点击关闭按钮隐藏模态框
    closeBtn1.addEventListener("click", function() {
        modal1.style.display = "none";
    });

    // 点击模态框外部隐藏模态框
    window.addEventListener("click", function(event) {
        if (event.target === modal1) {
            modal1.style.display = "none";
        }
    });
</script>
</body>
</html>